<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <f:view>
        <h:head>
            <title>User Registration Form</title>
            <link href="mycss.css" rel="stylesheet" type="text/css"/>
        </h:head>
        <h:body>
            <h:form  styleClass="registration" id="regForm"> 
                
                    <h:panelGrid columns="2">
                        <h4><h:outputLabel value="#{msg.RegTitle}"/></h4>
                        <h:outputText id="allError" binding="#{regController.allError}"/>
                    </h:panelGrid>
                
                <h:panelGrid columns="4">
                    <h:outputLabel value="#{msg.RegName}" for="regName" />
                    <h:inputText id="regName" label="Name" binding="#{regController.nameInput}" required="true" requiredMessage=" Required to enter">
                        <f:ajax event="keyup" render="nameError allError" listener="#{regController.keyUpListener}"/>
                    </h:inputText>
                    <h:message for="regName" showSummary="true" showDetail="false"/>
                    <h:outputLabel id="nameError" binding="#{regController.nameError}"/>


                    <h:outputLabel value="#{msg.RegEmail}" for="regEmail" />
                    <h:inputText id="regEmail" label="Email" binding="#{regController.emailInput}" required="true" requiredMessage=" Required to enter">
                        <f:ajax event="keyup" render="emailError allError" listener="#{regController.keyUpListener}"/>                        
                    </h:inputText>
                    <h:message for="regEmail" showSummary="true" showDetail="false"/>
                    <h:outputLabel id="emailError" binding="#{regController.emailError}"/>


                    <h:outputLabel value="#{msg.RegPass}" for="regPass" />
                    <h:inputSecret id="regPass" label="Password" binding="#{regController.passInput}" required="true" requiredMessage=" Required to enter">
                        <f:ajax event="keyup" render="passError allError" listener="#{regController.keyUpListener}"/>
                    </h:inputSecret>
                    <h:message for="regPass" showSummary="true" showDetail="false"/>
                    <h:outputLabel id="passError" binding="#{regController.passError}" />


                    <h:outputLabel value="#{msg.RegPassSec}" for="regPassSec" />
                    <h:inputSecret id="regPassSec" label="Second Password" binding="#{regController.pass2Input}" required="true" requiredMessage=" Required to enter">
                        <f:ajax event="keyup" render="pass2Error allError" listener="#{regController.keyUpListener}"/>
                    </h:inputSecret>
                    <h:message for="regPassSec" showSummary="true" showDetail="false"/>
                    <h:outputLabel id="pass2Error" binding="#{regController.pass2Error}"/>
                </h:panelGrid>
                
                <h:panelGroup>                    
                    <h:commandButton action="#{regController.backAction()}"  value="#{msg.BCancel}" immediate="true"/>
                    <h:commandButton action="#{regController.registrationAction()}"  value="#{msg.BReg}"/>
                </h:panelGroup>
            </h:form>
        </h:body>
    </f:view>
</html>
